inject custom css into app meta#9
Conversation
COMPARE TO
|
| Name | Diff |
|---|---|
| packages/console/src/components/Topbar/index.tsx | 📈 +888 Bytes |
| packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx | 📈 +190 Bytes |
| packages/core/package.json | 📈 +24 Bytes |
| packages/core/src/index.ts | 📈 +452 Bytes |
| packages/core/src/main.ts | 📈 +278 Bytes |
| packages/core/src/middleware/koa-cors.ts | 📈 +312 Bytes |
| packages/core/src/middleware/koa-security-headers.ts | 📈 +276 Bytes |
| packages/core/src/routes/experience/verification-routes/password-verification.ts | 📈 +174 Bytes |
| packages/core/src/utils/buttons-app-starter/appStarter.ts | 📈 +6.1 KB |
| packages/core/src/utils/buttons-app-starter/redis.ts | 📈 +3.54 KB |
| packages/core/src/utils/password-decryption.ts | 📈 +3.24 KB |
| packages/core/src/utils/watchdog.ts | 📈 +3.9 KB |
| packages/experience/package.json | 📈 +64 Bytes |
| packages/experience/src/Providers/AppBoundary/AppMeta.tsx | 📈 +145 Bytes |
| packages/experience/src/Providers/AppBoundary/bitfocus-custom-styles.css | 📈 +6 KB |
| packages/experience/src/assets/buttons.png | |
| packages/experience/src/constants/env.ts | 📈 +101 Bytes |
| packages/experience/src/hooks/use-encryption.ts | 📈 +5.44 KB |
| packages/experience/src/hooks/use-external-iframe-signin.ts | 📈 +1.17 KB |
| packages/experience/src/hooks/use-password-sign-in.ts | 📈 +145 Bytes |
| packages/experience/src/pages/SignIn/index.tsx | 📈 +89 Bytes |
| packages/experience/src/utils/crypto.ts | 📈 +662 Bytes |
| packages/experience/vite.config.ts | 📈 +53 Bytes |
| packages/schemas/src/types/interactions.ts | 📈 +361 Bytes |
| packages/shared/src/node/env/UrlSet.ts | 📈 +35 Bytes |
| pnpm-lock.yaml | 📈 +2.09 KB |
Summary of ChangesHello @kyrregjerstad, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request streamlines the management of custom styling within the application by relocating specific CSS rules into a dedicated file. This change establishes a foundational visual theme for the login and overall app experience, while simultaneously enhancing its customizability. By injecting this base styling before any user-defined overrides, it ensures a consistent look that can still be tailored as needed, improving both maintainability and flexibility. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a base set of custom styles for the login experience, which can be overridden by user-provided CSS. The implementation in AppMeta.tsx correctly injects the styles. However, the new CSS file bitfocus-custom-styles.css has several issues that need to be addressed. The styles are hardcoded for a dark theme and will not work correctly in light mode. There is also a likely broken image path and some maintainability concerns regarding brittle selectors and inconsistent comments. I've left detailed comments with suggestions for improvement.
| #app > div[class$='viewBox'] { | ||
| background: #0a0a0a; | ||
| min-height: 100vh; | ||
| } |
There was a problem hiding this comment.
The custom styles appear to be designed only for a dark theme, with hardcoded dark background and light text colors. However, the application supports both light and dark themes via a data-theme attribute on the <html> tag. These styles do not respect the current theme, which will result in poor readability and an incorrect appearance in light mode.
You should adapt these styles to work with both themes. You can use the [data-theme='light'] and [data-theme='dark'] selectors to provide theme-specific styles.
For example:
/* Default (dark theme) styles */
#app > div[class$='viewBox'] {
background: #0a0a0a;
}
/* Light theme overrides */
[data-theme='light'] #app > div[class$='viewBox'] {
background: #ffffff; /* Example light color */
}Alternatively, using CSS variables that change based on the theme would be an even better approach for maintainability.
| } | ||
|
|
||
| #app main[class*='main'] img[class*='logo'] { | ||
| content: url('src/assets/buttons.png'); |
There was a problem hiding this comment.
The path url('src/assets/buttons.png') is unlikely to work correctly in a production build. This CSS is injected as a raw string into a <style> tag in the document's <head>. The URL will be resolved relative to the page's URL, not the CSS file's source location. This means the browser will try to fetch https://<your-domain>/src/assets/buttons.png, which will likely result in a 404 error.
To fix this, you should use a path that is correct relative to the final deployment structure (e.g., an absolute path like /assets/buttons.png if your assets are served from an assets directory at the root).
A more robust solution would be to import the image in your TypeScript/JavaScript code to let the bundler (Vite) handle it, and then pass the resulting URL to your CSS, for example via a CSS variable. Another option is to inline the image as a data URI if it's small.
|
|
||
| #app main[class*='main'] div[class*='headline'] { | ||
| color: #d4d4d4; | ||
| } |
There was a problem hiding this comment.
This line has trailing whitespace. While this doesn't affect functionality, it's good practice to remove it to keep the code clean and consistent. Many code editors can be configured to do this automatically on save.
color: #d4d4d4;| background-color: #3b82f6; /* bitfocus-500 */ | ||
| color: #0f172a; |
There was a problem hiding this comment.
There seems to be an inconsistency with the color value for bitfocus-500. Here, background-color is set to #3b82f6 (blue) with a comment /* bitfocus-500 */. However, on line 171, the submit button's background is set to #F0BE35 (yellow) with a comment matches bg-bitfocus-500 styling.
Please verify which color is the correct one for bitfocus-500 and update the CSS and/or comments accordingly to avoid confusion.
|
|
||
| /* Hide the clear (suffix) button on identifier input */ | ||
| #app form div[class*='inputField'] [class$='suffix'] { | ||
| display: none !important; |
There was a problem hiding this comment.
The use of !important should generally be avoided as it can make stylesheets difficult to debug and override later. It breaks the natural cascade of CSS.
Please check if you can achieve the same result by increasing the selector's specificity. For example, a more specific selector might be able to override the display property without needing !important.
If !important is truly necessary here to override an inline style or another !important rule, it would be good to add a comment explaining why it's needed.
1 participant
Moves the custom CSS from the login experience into the logto package. This way, a user can override it easy, but still have this as the base without worrying about losing the base styling.
Mostly formatting changes, only new code is: